<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计测试</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script href="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>

</head>
<body  id="app">
<div id="container" style="min-width:400px;height:400px"></div>

<button onclick="fg()">店家测试</button>
<script>
    $(function () {
    var chart=$('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: '堆叠条形图'
        },
        xAxis: {
            categories: ['属1', '属2', '属3', '属4']
        },
        yAxis: {
            min: 0,
            title: {
                text: '统计图'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: '类1',
            data: [67, 23,24,87, 23]
        }, {
            name: '类2',
            data: [29, 92, 83, 72, 61]
        }, {
            name: '类3',
            data: [39, 94, 84, 72, 55]
        }]
    });

    function fg() {
        alert("safddg")

    }
});
</script>
</body>
</html>



